<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>register</title>
<script language="javascript" type="text/javascript">
function regValidation()
{
var firstName = document.registerform.fname;
var lastName = document.registerform.lname;
var dobDate = document.registerform.dob;
var mailID = document.registerform.email;
var phne = document.registerform.phoneno;
var healthNo = document.registerform.uname;
var psWrd = document.registerform.pass;

if(onlyAlphabets(firstName)){
if(onlyAlphabets(lastName)){
if(check()){
if(validDob(dobDate)){	
if(validEmail(mailID)){
if(validPhneNo(phne,10)){
if(validHealthNO(healthNo,12)){
if(validPassWrd(psWrd,5,12)){
	document.forms[0].submit();
	return true;
}
}
}	
}	
}	
}	
}
}

return false;
}

function onlyAlphabets(Name)  
{   
var words = /^[A-Za-z]+$/;  
if(Name.value.match(words))  
{  
return true;  
}  
else  
{  
alert('Name is required and must be Alphabets');  
return false;  
}
}

function check(){	
optionLen = document.registerform.gen.length;
option = "";
for (i = 0; i <optionLen; i++) {
if (document.registerform.gen[i].checked) {
option = document.registerform.gen[i].value;
}
}

if (option == "") {
alert("Select the Gender");
return false;
}else
{
return true;
}
}

function validDob(dobirth)
{
var dateFormat = /^(?:(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[01])(19|20)[0-9]{2})$/;
if(dobirth.value.match(dateFormat))
{
return true;	
}else{
alert('Date of Birth is Invalid \n Enter Date in MMDDYYYY Format');
return false;
}
}

function validEmail(mailID)
{
var idFormat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;	
if(mailID.value.match(idFormat))  
{  
return true;  
}  
else  
{  
alert('Email ID is Invalid');  
return false;  
}
}

function validPhneNo(phneNo,lenth)
{
var noFormat =  /^(\d{3})(\d{4})(\d{4})$/;
if(phneNo.value.match(noFormat)){
return true;
} 
else
{
alert('Phone Number is Invalid');
return false;	
}
}

function validHealthNO(healthNo,len)
{
var size = healthNo.value.length;
var noFormat =  /^[0-9A-Z]+$/;
if(size == 0 || size < len)
{
alert('Health Card Number must not be Empty / less than 12 chars'); 
return false;
}
if(healthNo.value.match(noFormat))  
{  
return true;  
}  
else  
{  
alert('Health Card Number is Invalid \n Use only 0-9 & A-Z characters');  
return false;  
}
}

function validPassWrd(passWrd,st,fin)
{
var passLen = passWrd.value.length;
if(passLen == 0 || passLen < st || passLen > fin )
{
alert('Password must not be Empty & must be between 5 to 12 chars'); 
return false;
}else
{
return true;
}
}

</script>
</head>
<body>
<table width=100% bordercolor="#F0F0F0" bgcolor="#CCCCCC">
<tr><th scope="col"><div align="center"><h1 align="left">Walk-in Clinics Hassle Free</h1></div></th></tr>
</table>
&nbsp;
<fieldset>
<legend><b>Register </b></legend>
<h3 align=center> New User Registration</h3>
<p align=center>Please complete the below details to become a registered user of WICHF </p>
<div style="color: red; font-weight: bold;"><%=request.getAttribute("message")%></div>
<form name="registerform" onSubmit="return regValidation();" method="post" action="./">
<table width=50% align=center cellpadding=5 cellspacing=0 bgcolor="#D5FFD5">
<tr><td>&nbsp;</td><tr> 
<tr>
<td height="25"><div align="right">First Name</div></td>
<td><input type="text" name="fname" value="" /></td>
</tr>
<tr>
<td height="25"><div align="right">Last Name</div></td>
<td><input type="text" name="lname" value="" /></td>
</tr>
<tr>
<td height="25"><div align="right">Gender</div></td>
<td><input type="radio" name="gen" value="male"/> Male
<input type="radio" name="gen" value="female"/> Female</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="25"><div align="right">Date of Birth</div></td>
<td><input type="text" name="dob" value="" maxlength="8"/></td>
</tr>
<tr>
<td height="25"><div align="right">Email</div></td>
<td><input type="text" name="email" value="" /></td>
</tr>
<tr>
<td height="25"><div align="right">Phone Number</div></td>
<td><input type="text" name="phoneno" value="" maxlength="11"></td>
</tr>
<tr>
<td height="25"><div align="right">Health Card Number</div></td>
<td><input name="uname" type="text" id="username" value="" maxlength="12"/></td>
</tr>
<tr>
<td height="25"><div align="right">Password</div></td>
<td><input name="pass" type="password" value="" maxlength="12"></td>
</tr>
<tr>
<td height="40" colspan=2 align=center><input type="submit" name="register" value="Register" /></td>
</tr>
<tr>
<td colspan="2"><div align="center">Existing User :  <a href="login.jsp">Login</a></div></td>
</tr>
<tr><td>&nbsp;</td><tr> 
</table>
</form>
</fieldset>
</body>
</html> 